<script>
import JTableBody from './JTableBody.vue';
import JTableBorder from './JTableBorder.vue';
import JTableBodySeletion from './JTableBodySeletion.vue';
import JTableBodyGrid from './JTableBodyGrid.vue';
export default {
  props:{
    rows:{
      type:Array,
      require:true,
    },
    cols:{
      type:Array,
      required:true,
    },
    helper:{
      type:Object,
      required:true
    }
  },
  render(h){
    return h('div', {
          ref:'bodyContainer',
          style:{
            width: 'fit-content',
            height: 'fit-content',
            overflowY:'auto',
            overflow:'overlay',
            background:'white'
          }
        },[
          h(JTableBodySeletion,{
            props: {
              cols: this.cols,
              rows: this.rows,
              merges: this.helper.table ? this.helper.table.merges : [],
              helper: this.helper
            },
            style:{
              position:"absolute",
              zIndex: 3,
              pointerEvents: this.helper.getEdittingCell()==null?"all":"none"
            }
          }),
          h(JTableBorder,{
            id:'tableGrid',
            ref:'tableRef',
            style:{
              position:"absolute",
              zIndex: 2,
              pointerEvents:'none'
            },
            props:{
              cols: this.cols,
              rows: this.rows,
              helper: this.helper,           
            }
          }),
          h(JTableBody, {
            props: {
              cols: this.cols,
              rows: this.rows,
              merges: this.helper.table ? this.helper.table.merges : [],
              helper: this.helper
            },
            style:{
              zIndex: 1,
              position:"relative",
            }
          }),
          h(JTableBodyGrid,{
            props: {
              cols: this.cols,
              rows: this.rows,
            },
            style:{
              position:"absolute",
              top:"0",
              zIndex: 0
            },
          })
        ])
  }
}
</script>

<style>

</style>